<template>
  <div class="box">
      <div class="attachment">

          <el-table :data="tableData" style="width: 100%">
       
          <el-table-column type="index" show-overflow-tooltip label="序号" ></el-table-column>
          <el-table-column prop="agreementName" label="附件名称" >
            
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="btn_see(scope.row.agreementName,scope.row.filePath)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pageStyle">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
        
      </div>

    <el-dialog :title="title" :visible.sync="attachmentDialog" width="60%">
      <iframe frameborder=0 name="showHere" width="100%" height="600" scrolling=auto src="http://49.4.89.238:30000/mdrawins/assets/test/files/zb/%E6%8B%9B%E6%A0%87%E6%96%87%E4%BB%B6.pdf"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { truncate } from 'fs';
export default {
    data(){
        return{
            attachmentDialog:false,
            title:"",
            tableData: [{
                agreementName: '招标文件',
                filePath: ''
            },{
                agreementName: '采购文件',
                filePath: ''
            },{
                agreementName: '抽取公告',
                filePath: ''
            },{
                agreementName: '中标通知书',
                filePath: ''
            },{
                agreementName: '中选/标通知书',
                filePath: ''
            },{
                agreementName: '抽取公告',
                filePath: ''
            },{
                agreementName: '项目合同',
                filePath: ''
            },],
            currentPage4: 4
        }
    },
    methods:{
        btn_see(title,path){
            this.title=title
            this.attachmentDialog=true
        },
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
}
</script>

<style scoped>
    * {
        box-sizing: border-box;
    }
    .box {
        padding: 30px;
    }
    .pageStyle{
        margin-top: 20px;
        text-align: center;
    }

</style>